<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>特效合集</title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				padding: 0;
				margin: 0;
			}
			
			.main {
				padding: 20px;
			}
			
			.cent {
				width: 100%;
				text-align: center;
			}
			
			.blist {
				display: flex;
				flex-flow: wrap;
				justify-content: space-between;
				align-items: center;
				padding: 20px;
			}
			
			button {
				width: 100px;
				height: 30px;
				border-radius: 20px;
			}
			
			.m20 {
				margin: 20px;
			}
			
			a {
				text-decoration: none;
				background: #2f435e;
				color: #f2f2f2;
				padding: 10px 30px 10px 30px;
				font-size: 16px;
				font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
				font-weight: bold;
				border-radius: 3px;
				-webkit-transition: all linear 0.30s;
				-moz-transition: all linear 0.30s;
				transition: all linear 0.30s;
			}
			a:hover {
				background-color: yellowgreen;
			}
			
		
		</style>
	</head>

	<body>
		<div class="main">
			<div class="cent">
				<div id="">
					前端特效合集
				</div>
				<div class="blist">
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			
			var list = [
			{name:"波纹",	url:"./tx/tx1.html"},
			{name:"滚动",	url:"./tx/tx2.html"},
			{name:"横版导航1",	url:"./tx/tx3.html"},
			{name:"横版导航2",	url:"./tx/tx4.html"},
			{name:"竖版导航",	url:"./tx/tx5.html"},
			{name:"圆形导航",	url:"./tx/tx6.html"},
			{name:"环形导航",	url:"./tx/tx7.html"},
			{name:"三角导航",	url:"./tx/tx8.html"},
			{name:"图标按钮",	url:"./tx/tx9.html"},
			{name:"喜欢点赞特效",	url:"./tx/tx10.html"},
			{name:"Twitter点赞动画",	url:"./tx/tx11.html"},
			{name:"下拉列表",	url:"./tx/tx12.html"},
			{name:"导航菜单下划线跟随鼠标",	url:"./tx/tx13.html"},
			{name:"导航菜单下划线跟随鼠标2",	url:"./tx/tx14.html"},
			{name:"导航菜单下划线跟随鼠标3",	url:"./tx/tx15.html"},
			{name:"彩虹预加载动画",	url:"./tx/tx16.html"},
			{name:"旋转加载动画1",	url:"./tx/tx17.html"},
			{name:"旋转加载动画2",	url:"./tx/tx18.html"},
			{name:"小球旋转加载动画1",	url:"./tx/tx19.html"},
			{name:"小球旋转加载动画2",	url:"./tx/tx20.html"},
			{name:"小球跳动加载动画",	url:"./tx/tx21.html"},
			{name:"牛轧糖加载动画",	url:"./tx/tx22.html"},
			{name:"按钮遮罩动画1",	url:"./tx/tx23.html"},
			{name:"按钮遮罩动画2",	url:"./tx/tx24.html"},
			{name:"按钮遮罩动画3",	url:"./tx/tx25.html"},
			{name:"按钮悬停动画1",	url:"./tx/tx26.html"},
			{name:"按钮悬停动画2",	url:"./tx/tx27.html"},
			{name:"按钮悬停动画3",	url:"./tx/tx28.html"},
			{name:"按钮悬停动画4",	url:"./tx/tx29.html"},
			{name:"文字遮罩动画",	url:"./tx/tx30.html"},
			{name:"按钮背景滑动动画",	url:"./tx/tx31.html"},
			{name:"偷窥的小狗",	url:"./tx/tx32.html"},
			{name:"颠倒的猫",	url:"./tx/tx33.html"},
			{name:"气球动画",	url:"./tx/tx34.html"},
			{name:"switch切换按钮",	url:"./tx/tx35.html"},
			{name:"翻转效果的switch切换按钮",	url:"./tx/tx36.html"},
			{name:"标题滚动动画",	url:"./tx/tx37.html"},
			{name:"定向感知hover悬停",	url:"./tx/tx38.html"},
			{name:"页面滚动延迟",	url:"./tx/tx39.html"},
			{name:"卡片3D视差",	url:"./tx/tx40.html"},
			{name:"卡片3D视差2",	url:"./tx/tx41.html"},
			{name:"卡片和文件夹动画",	url:"./tx/tx42.html"},
			{name:"文字模糊动画",	url:"./tx/tx43.html"},
			{name:"文字填充动画",	url:"./tx/tx44.html"},
			{name:"文字乱码动画",	url:"./tx/tx45.html"},
			{name:"3D选项卡",	url:"./tx/tx46.html"},
			{name:"3D翻转卡",	url:"./tx/tx47.html"},
			{name:"3D翻转卡2",	url:"./tx/tx48.html"},
			{name:"3D旋转卡",	url:"./tx/tx49.html"},
			{name:"文本框获得焦点的动画",	url:"./tx/tx50.html"},
			{name:"选项卡的竖直手风琴效果",	url:"./tx2/tx1.html"},
			{name:"天气图标动画",	url:"./tx2/tx2.html"},
			{name:"喜怒无常的气球滑块",	url:"./tx2/tx3.html"},
			{name:"表情变化动画",	url:"./tx2/tx4.html"},
			{name:"谷歌滑块",	url:"./tx2/tx5.html"},
			{name:"img的hover效果",	url:"./tx2/tx6.html"},
			{name:"通知弹出效果",	url:"./tx2/tx7.html"},
			{name:"圆形卡片式工具栏",	url:"./tx2/tx8.html"},
			{name:"可拖动排序的列表",	url:"./tx2/tx9.html"},
			{name:"工具栏动画",	url:"./tx2/tx10.html"},
			{name:"banner切换动画",	url:"./tx2/tx11.html"},
			{name:"弹性下拉刷新",	url:"./tx2/tx12.html"},
			//svg
			{name:"Low poly背景生成",	url:"./tx2/tx13.html"},
			{name:"粘性悬停菜单",	url:"./tx2/tx14.html"},
			{name:"天气图标动画",	url:"./tx2/tx15.html"},
			{name:"文本笔画动画",	url:"./tx2/tx16.html"},
			{name:"404动画",	url:"./tx2/tx17.html"},
			{name:"汉堡按钮动画",	url:"./tx2/tx18.html"},
			{name:"音量控制栏",	url:"./tx2/tx19.html"},
			{name:"提交按钮动画",	url:"./tx2/tx20.html"},
			{name:"6个动画图标",	url:"./tx2/tx21.html"},
			{name:"svg图表",	url:"./tx2/tx22.html"},
			{name:"反馈表情",	url:"./tx2/tx23.html"},
			//canvas
			{name:"两点之间相连接的动画",	url:"./tx2/tx24.html"},
			{name:"图像模糊加载",	url:"./tx2/tx25.html"},
			{name:"多点二次曲线动画",	url:"./tx2/tx26.html"},
			//canvas + WebGL动画
			{name:"土星动画",	url:"./tx2/tx27.html"},
			{name:"丝带旋转动画",	url:"./tx2/tx28.html"},
			//其他 css + js 
			{name:"滚动视差",	url:"./tx2/tx29.html"},
			{name:"文字输入动画",	url:"./tx2/tx30.html"},
			{name:"支持新增、删除的列表框",	url:"./tx2/tx31.html"},
			{name:"d3.js环形进度条",	url:"./tx2/tx32.html"},
			{name:"纯css3环形进度条",	url:"./tx2/tx33.html"},
			{name:"纯css3环形进度条2",	url:"./tx2/tx34.html"},
			{name:"基于光标位置的块阴影",	url:"./tx2/tx35.html"},
			{name:"注册、登录、密码重设的界面组合",	url:"./tx2/tx36.html"},
			{name:"分步骤填写的表单",	url:"./tx2/tx37.html"},
			{name:"React + Redux 待办事项应用",	url:"./tx2/tx38.html"},
			{name:"React + Redux 待办事项应用2",	url:"./tx2/tx39.html"},
			{name:"纸片对话框",	url:"./tx2/tx40.html"},
			{name:"卡片角标",	url:"./tx2/tx41.html"},
			{name:"文件树",	url:"./tx2/tx42.html"},
			{name:"面包屑导航",	url:"./tx2/tx43.html"},
			{name:"卡片切换动画",	url:"./tx2/tx44.html"},
			{name:"气泡三角形",	url:"./tx2/tx45.html"},
			{name:"css综合UI",	url:"./tx2/tx46.html"},
			{name:"css控件组",	url:"./tx2/tx47.html"},
			{name:"均衡器",	url:"./tx2/tx48.html"},
			{name:"带有删除线动画的复选框",	url:"./tx2/tx49.html"},
			{name:"css日历",	url:"./tx2/tx50.html"},
			{name:"下拉列表式Menu",	url:"./tx3/tx1.html"},
		
			//常用10款web特效
			{name:"百叶窗效果焦点图",	url:"./shutter/index.html"},
			{name:"多层级垂直手风琴菜单",	url:"./menu/index.html"},
			{name:"悬浮标题的幻灯片播放焦点图",	url:"./slider/index.html"},
			{name:"气泡提示框 可自定义配置箭头",	url:"./arrow/index.html"},
			{name:"花哨显示",	url:"./tx/tx3.html"},
			{name:"动画效果",	url:"./tx/tx4.html"},
			{name:"动画效果2",	url:"./tx/tx5.html"},
			{name:"animate例子",	url:"./tx/tx6.html"},
			]
			var bc = document.getElementsByClassName("blist")[0];
			//bc.innerHTML = "";
			console.log(bc);
			
			var strs = ""
			for (let i = 0; i < list.length; i++) {
				let r = Math.ceil(Math.random()*200);
				let g = Math.ceil(Math.random()*200);
				let b = Math.ceil(Math.random()*200);
				let str = "<a href='" + list[i].url + "'class='m20' "+
				"style='background-color: rgb(" + r + "," + g + "," + b +")' "+
				
			"onmouseover = 'over(this)'  onmouseout = 'out(this)'>" + list[i].name +
				" </a>"
				 strs += str;
				
			}
			bc.innerHTML = strs;

			function over(e){
				
				e.style.backgroundColor = color();
			}
			function out(e){
				e.style.backgroundColor = color();
			}
			 function color(){
      let rgb='rgb('+Math.floor(Math.random()*200)+',' 
      +Math.floor(Math.random()*200)+','  
      +Math.floor(Math.random()*200)+')';
      return rgb;
    }


		</script>
	</body>

</html>